import { observer } from 'mobx-react-lite';
import { useCallback, useEffect, useState } from 'react';
import { AddOutlined, class_esy, isEmpty, Select } from 'esy-ui';
import { Empty, Header } from '@/components';
import { useGlobalStore, useUserInfoStore } from '@/mobx';
import { postBindBankList } from '@/services';
import { useFormatText, useNavigation } from '@/hooks';
import { form_slt_com } from '@/styles/esy-ui';
import BankIcon from '@/components/icon/Bank';

// 选择类型
const types = [
  {
    text: 'text_41',
    value: -1,
  },
  {
    text: 'text_71',
    value: 0,
  },
  {
    text: 'text_72',
    value: 1,
  },
];

function BankList() {
  const { userInfo } = useUserInfoStore();
  const { changeState } = useGlobalStore();
  const navigation = useNavigation();
  const { text } = useFormatText();
  // 绑定列表
  const [bandList, setBandList] = useState([]);
  // 筛选类型
  const [type, setType] = useState(-1);

  // 获取绑定列表
  const getBindList = useCallback(() => {
    if (userInfo?.Token) {
      changeState('isLoading', true);
      postBindBankList({ IsHis: false, PWType: type })
        .then((res: any) => {
          console.info(res?.Data);
          setBandList(res?.Data);
        })
        .catch(() => {})
        .finally(() => {
          changeState('isLoading', false);
        });
    }
  }, [userInfo?.Token, changeState, type]);

  // 获取我的绑定列表
  useEffect(() => {
    getBindList();
  }, [getBindList]);

  // 打开新增弹窗
  const handleOpen = () => {
    navigation('/band-add');
  };

  // 关闭新增弹窗
  // const onClose = () => {
  //   setOpen(false);
  // };

  // 新增银行/钱包
  // const onSubmit = () => {
  //   changeState('isLoading', true);
  //   form
  //     .validate()
  //     .then((values) => {
  //       if (Object.values(values).some((it) => !it)) {
  //         Toast.show({ content: text('text_88') });
  //         changeState('isLoading', false);
  //       } else {
  //         const api = type === 2 ? postAddBindBank : postAddBindWallet;
  //         api(values)
  //           .then(() => {
  //             getBindList();
  //             onClose();
  //           })
  //           .catch(() => {})
  //           .finally(() => {
  //             changeState('isLoading', false);
  //           });
  //       }
  //     })
  //     .catch((err) => {
  //       console.info(err);
  //       changeState('isLoading', false);
  //     });
  // };

  return (
    <div className='bg-white h-full flex flex-col'>
      <Header title='text_68' isGoHome />
      <div className='flex items-center justify-between py-5 px-2.5'>
        <div className='flex items-center gap-x-3 text-sm'>
          {/* {titles.map((it) => (
            <button
              key={it.id}
              type='button'
              className={class_esy(['flex items-center px-3 py-1 rounded gap-x-2 border border-solid bg-white'])}
              onClick={() => {
                // setTtK(it.id);
              }}
            >
              {text(it.tKey)}
              <span>{bandList?.length}</span>
            </button>
          ))} */}
          <Select
            classNames={form_slt_com}
            options={types.map((it) => ({ ...it, text: text(it.text) }))}
            defaultValue='-1'
            prefix={<BankIcon className='absolute top-3 left-3' />}
            onSelect={(e: any) => {
              // console.info(e.value);
              setType(e.value);
            }}
          />
        </div>
        <div className='w-8 h-8 rounded-half bg-color-21 text-white flex items-center justify-center' onClick={handleOpen}>
          <AddOutlined className='text-sm' />
        </div>
      </div>

      {isEmpty(bandList) ? (
        <Empty />
      ) : (
        <div className='flex-1 overflow-y-auto py-2.5 bg-white'>
          {bandList.map((it, i) => (
            <div key={it.Id || i} className={class_esy(['flex justify-between min-h-12 p-2.5 m-2.5 rounded', it.Pwtype === 0 ? 'bg-lg-5' : 'bg-color-21'])}>
              <div className='flex items-center gap-2'>
                <div className='bg-white rounded flex items-center py-2.5 px-2 text-xs'>{`${it.BankName}`.slice(0, 4)}</div>
                <div className='flex flex-col text-sm gap-1 text-white'>
                  <div>{it.BankName}</div>
                  <div>{it.AccountNo}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default observer(BankList);
